<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/icon-top.css">
    <link rel="stylesheet" href="css/hot.css">
    <link rel="stylesheet" href="css/bottom.css">
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $(".settings").hide();
            $(".header-left-text2").hover(function () {
                $(".settings").show().hover(function () {
                    $(this).show();
                },function () {
                    $(".settings").hide();
                });
            });

            $(".search-text div img").hover(function () {
                $(".search-text div").css("width","32px").css("height","24px");
                $(this).prop('src',"img/搜狗截图20211214141841.png");
            },function () {
                $(".search-text div").css("width","28px").css("height","28px");
                $(this).prop('src',"img/搜狗截图20211214172739.png");
            })
        });

    </script>

</head>
<body>

<!--顶部列表容器-->
<div class="header">
    <!--左侧导航信息容器-->
    <div class="header-left">
        <a class="header-left-text" href="javascript:(0)">新闻</a>
        <a class="header-left-text" href="javascript:(0)">hao123</a>
        <a class="header-left-text" href="javascript:(0)">地图</a>
        <a class="header-left-text" href="javascript:(0)">贴吧</a>
        <a class="header-left-text" href="javascript:(0)">视频</a>
        <a class="header-left-text" href="javascript:(0)">图片</a>
        <a class="header-left-text" href="javascript:(0)">网盘</a>
        <a class="header-left-text" href="javascript:(0)">更多</a>
    </div>

    <!--右侧设置和登录按钮容器-->
    <div class="header-right">
        <div class="header-left-text2" >设置</div>
        <div >
            <button  class="header-right-btn" type="button" value="登录">登录</button>
        </div>
    </div>
</div>

<!--设置下拉隐藏-->
<div class="settings" >
    <div class="header-left-text">搜索设置</div>
    <div class="header-left-text">高级搜索</div>
    <div class="header-left-text">关闭预测</div>
    <div class="header-left-text">隐私设置</div>
    <div class="header-left-text">关闭热搜</div>
</div>


<!--图标和搜索框容器-->
<div class="icon-top">
    <!--图标Logo-->
    <div class="logo">
        <img src="img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    </div>
    <!--搜索框-->
    <div class="search">
        <!--搜索框-->
        <div class="search-text">
            <input type="text">
            <div><img src="img/搜狗截图20211214172739.png"></div>
        </div>
        <!--按钮-->
        <div class="search-btn">
            <button type="button" value="百度一下">百度一下</button>
        </div>
    </div>
</div>

<!--热搜容器-->
<div class="hot">
    <!--百度热搜-->
    <div class="hot-top">
        <a class="header-left-text" style="font-family: '黑体'"> 百度热搜 ></a>
        <a class="header-left-text"> 换一换</a>
    </div>
    <div class="hot-contain">
        <!--每一个热搜-->
        <a><div style="color: red">1</div> &nbsp;&nbsp; 数读十九届六中全会精神
            <div>热</div>
        </a>
        <!--每一个热搜-->
        <a><div style="color: #ed3d0c">2</div> &nbsp;&nbsp; 31省区市新增51例本土确诊
            <div>热</div>
        </a>

        <!--每一个热搜-->
        <a><div style="color: #ec971f">3</div> &nbsp;&nbsp; 十九届六中全会决议中的10个明确
            <div>热</div>
        </a>

        <!--每一个热搜-->
        <a><div style="color: #777777">4</div> &nbsp;&nbsp; 汉文帝霸陵近千年谬误被纠正
            <div>热</div>
        </a>

        <!--每一个热搜-->
        <a><div style="color: #777777">5</div> &nbsp;&nbsp; 央视网:星巴克的“震惊”令人震惊
            <div>热</div>
        </a>

        <!--每一个热搜-->
        <a><div style="color: #777777">6</div> &nbsp;&nbsp; 孙海洋希望注销孙卓的黑户口
            <div style="background-color: red">新</div>
        </a>

    </div>
</div>


<!--底部导航容器-->
<div class="bottom">
    <a>关于百度</a>
    <a>About Baidu</a>
    <a>帮助中心京公网安备11000002000001号</a>
    <a>京ICP证030173号</a>
    <a>©2021 Baidu</a>
    <div id="bottom">互联网药品信息服务资格证书 (京)-经营性-2017-0020</div>
    <a>信息网络传播视听节目许可证 0110516</a>
</div>
</body>
</html>